/********************************************************************************
 *@fileName: userUnblockLogs.jsx
 *@description: 用户封禁解封记录
 *@author: Xhd
 *@API: 清悦
 *@Product: 马文娇
 *@date: 2024-05-13 14:10:28
 *@version: V1.0.0
**********************************************************************************/

import React, { Component } from 'react';
import TheQueryForm from '@/components/TheQueryForm';
import TheTable from '@/components/TheTable';
import TheImage from '@/components/TheImage';
import ThePagination from '@/components/ThePagination';
import { apiGetUserUnblockLogsPage } from "@/request/logs";
import enums from "../riskControl/Enum";

const blockData = enums;
const blockType = [{value: 'MEMBER_ACCOUNT', label: "账号封禁",}]
const unblockType = []
const block = Object.assign({}, blockData.reportState, blockData.reportState_content )
const unBlock = Object.assign({}, blockData.appealState, blockData.appealState_content)
Object.keys(block).forEach(key => {
  blockType.push({ value: key, label: block[key] })
})
Object.keys(unBlock).forEach(key => {
  unblockType.push({ value: key, label: unBlock[key] })
})

class UnblockLogs extends Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef();
    this.state = {
      columns: [
        {
          title: '用户ID',
          dataIndex: 'bannedMemberId',
          key: 'bannedMemberId',
        },
        {
          title: '用户名称',
          dataIndex: 'bannedMemberName',
          key: 'bannedMemberName',
        },
        {
          title: '操作动作',
          dataIndex: 'bannedTypeText',
          key: 'bannedTypeText',
        },
        {
          title: '操作人',
          dataIndex: 'operatorName',
          key: 'operatorName',
        },
        {
          title: '时长',
          dataIndex: 'unblockTime',
          key: 'unblockTime',
          render: (text, record) => {
            if (record.bannedTime) {
              if (record.bannedTimeType === "0") {
                return "永久"
              } else {
                let time = ((new Date(record.bannedEndTime) - new Date(record.bannedTime)) / 1000 / 60 / 60).toFixed(0)
                return time > 24 ? time / 24 + "天" : time + "小时"
              }
            } else {
              return "-"
            }
          }
        },
        {
          title: '图片证明',
          dataIndex: 'handlingOpinionsImage',
          key: 'handlingOpinionsImage',
          render: (text) => {
            let img = text ? text.split(',') : []
            return img.map((item) => {
              return <TheImage src={item} alt="" />
            })
          }
        },
        {
          title: '操作时间',
          dataIndex: 'createTime',
          key: 'createTime',
        },
        {
          title: '处理意见',
          dataIndex: 'handlingOpinions',
          key: 'handlingOpinions',
        },
      ],
      searchOption: [
        { field: 'memberId', label: '用户ID', placeholder: '请输入用户ID或昵称', required: false, rules: [], type: 'Input', defaultValue: '' },
        {
          field: 'blockType', label: '封禁类型', placeholder: '请选择', type: 'Select',
          options: blockType, mode: "multiple"
        },
        {
          field: 'unBlockType', label: '解封类型', placeholder: '请选择', type: 'Select',
          options: unblockType, mode: "multiple"
        },
        { field: 'time', label: '操作时间', placeholder: '请选择操作时间', type: 'RangePicker', required: false, rules: [], defaultValue: " " },
      ],
      dataSource: [],
      pageData: { pageNo: 1, pageSize: 10 },
      total: 0,
      searchValue: {},
    }
  }

  componentDidMount() {
    this.getData()
  }

  getData = async () => {
    const { pageData, searchValue } = this.state;
    if (searchValue.time) {
      searchValue.startTime = searchValue.time[0].format('YYYY-MM-DD') + ' 00:00:00'
      searchValue.endTime = searchValue.time[1].format('YYYY-MM-DD') + ' 23:59:59'
      delete searchValue.time
    }
    if(searchValue.blockType && searchValue.blockType.length === 0) {
      delete searchValue.blockType
    }
    if(searchValue.unBlockType && searchValue.unBlockType.length === 0){
      delete searchValue.unBlockType
    }
    const params = { ...pageData, ...searchValue };
    await apiGetUserUnblockLogsPage(params).then((res) => {
      if (res.code === 0) {
        this.setState({ dataSource: res.data, total: res.totalCount })
      }
    })
  }

  onFormSearch = (values) => {
    const params = { ...values };
    this.setState({ searchValue: params, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }

  onReset = () => {
    this.queryFormRef.formRef.resetFields();
    this.setState({ searchValue: {}, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({ pageData: { pageNo, pageSize } }, () => {
      this.getData()
    })
  }

  render() {
    const { columns, dataSource, pageData: { pageNo, pageSize }, total, searchOption, } = this.state;
    return (<div className='p-layout-box'>
      <TheQueryForm ref={(ref) => (this.queryFormRef = ref)} show={true} option={searchOption} onReset={() => this.onReset()} onGetValues={(values) => this.onFormSearch(values)} />
      <TheTable scroll={{ x: 'max-content', y: '63vh' }} columns={columns} dataSource={dataSource} />
      <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
    </div>)
  }
}

export default UnblockLogs